import { cuesRankArea, cuesRankTable } from '@/services/api/api-analysis';
import { Area, Pie } from '@ant-design/charts';
import { ActionType, GridContent, PageContainer, ProCard, ProTable } from '@ant-design/pro-components';
import { Card, DatePicker, Radio } from 'antd';
import moment from 'moment';
import React, { useEffect, useRef, useState } from 'react';

const RankTable: React.FC = ({ }) => {
    const [loading, setLoading] = useState(false);
    const ref = useRef<ActionType>();
    const options = [
        {
            value: 7,
            label: '近7天',
        },
        {
            value: 60,
            label: '近60天',
        },
        {
            value: 90,
            label: '近90天',
        },
    ]
    const [dataTabSelect, setDataTabSelectState] = useState<number>(options[2].value);
    const [rankAreaData, setRankAreaData] = useState([]);

    /**
     * 宣传刊播
     * @param key
     */
    const loadrankAreaData = async (day: number) => {
        try {
            const response = await cuesRankArea();
            if (response.code === 0) {
                console.log(response?.data);
                setRankAreaData(response?.data);
            }
            setLoading(false)
        } catch (error) { }
    };
    useEffect(() => {
        loadrankAreaData(dataTabSelect);
    }, []);
    const config = {
        data: rankAreaData,
        xField: 'industryName',
        yField: 'count',
        xAxis: {
            range: [0, 1],
        },
        smooth: true, // 添加smooth属性来控制曲线的平滑度
    };
    return (
        <ProCard
            title="热门行业"
            bordered
            // extra={<><Radio.Group options={options} value={dataTabSelect} onChange={(e) => {
            //     setLoading(true)
            //     setDataTabSelectState(e.target.value)
            // }} optionType="button" /></>}
            split="horizontal"
            bodyStyle={{
                margin: 0,
                padding: 30
            }}
            headerBordered
        >
            <Area {...config} style={{ height: 200, paddingLeft: 30, paddingRight: 30 }} />
            <ProTable<CuesSubmitData.SubmitPage>
                columns={[
                    {
                        title: '排名',
                        dataIndex: 'rank',
                        // copyable: true,
                        ellipsis: true,
                        width: '180px',
                        align: 'center',
                        key: 'articleName',
                    },
                    {
                        title: '行业',
                        dataIndex: 'industryName',
                        key: 'industryName',
                        width: '140px',
                        align: 'center',
                        search: false,

                    },
                    {
                        title: '次数',
                        key: 'count',
                        dataIndex: 'count',
                        width: '180px',
                        search: false,
                        align: 'center',
                        sorter: (a, b) => a.count - b.count,
                    },
                ]}
                request={async (params = {}) => {
                    const response = await cuesRankTable({
                        ...params,
                    });
                    console.log(response);
                    return Promise.resolve({
                        data: response.data.data,
                        total: response.data.total,
                        success: response.code === 0,
                    });
                }}
                actionRef={ref}
                ghost
                rowKey="id"
                dateFormatter="string"
                bordered
                search={false}
                sticky
                cardProps={{
                    style: {
                        padding: 0,
                    },
                }}
                toolbar={{
                    style: {
                        marginTop: -16,
                    },
                }}
                toolBarRender={false}
                pagination={{
                    showQuickJumper: false,
                    showSizeChanger: false,
                    defaultPageSize: 5,
                }}
            />
        </ProCard >
    )
};
export default RankTable;
